<!--学校或单位名称||起始日期||结束日期-->
<template>
  <div class="container">
    <van-form @submit="onSubmit">
      <van-cell title="学校或单位名称"/>
      <van-field
        v-model="place_name"
        name="place_name"
        placeholder="请填写学校单位名称"
        clearable
        :readonly="readonly"
      />
      <van-cell title="职位或身份"/>
      <van-field
        v-model="position"
        name="position"
        clearable
        placeholder="请选择职位或身份"
        :readonly="readonly"
      />
      <!--    起始日期-->
      <van-cell title="起始日期"/>
      <van-field
        is-link
        readonly
        clickable
        name="start_at"
        :value="start_at"
        placeholder="请选择"
        @click="showPicker = true"
        clearable
      />
      <van-popup v-model="showPicker" position="bottom" :style="{ height: '40%' }" round>
        <van-datetime-picker
          v-model="currentDate"
          type="date"
          title="开始日期"
          :min-date="minDate"
          :max-date="maxDate"
          :formatter="formatter"
          @confirm="onConfirm"
        />
      </van-popup>
      <!--    结束日期-->
      <van-cell title="结束日期"/>
      <van-field
        is-link
        readonly
        clickable
        name="end_at"
        :value="end_at"
        placeholder="请选择"
        @click="showPicker2 = true"
        clearable
      />
      <van-popup v-model="showPicker2" position="bottom" :style="{ height: '40%' }" round>
        <van-datetime-picker
          v-model="currentDate"
          type="date"
          title="出生日期"
          :min-date="minDate"
          :max-date="maxDate"
          :formatter="formatter"
          @confirm="onConfirm2"
        />
      </van-popup>
      <div class="add_btn">
        <van-button @click="addContent" type="primary" size="small" :disabled="visibel">确定添加</van-button>
      </div>
      <van-swipe-cell class="add-content" @close="close" :name="index" v-for="(item,index) of lists" :key="index">
        <div>
          <van-cell center :title="item.place_name" :value="item.position" :label="item.start_at+'--'+item.end_at"/>
        </div>
        <template #right>
          <van-button square text="删除" type="danger" class="delete-button"/>
        </template>
      </van-swipe-cell>
      <div style="margin: 16px;">
        <van-button round block type="info" native-type="submit" :disabled="btn_disable">
          下一步
        </van-button>
      </div>
    </van-form>
  </div>
</template>

<script>
export default {
  name: 'learnWork',
  data () {
    return {
      place_name: '',
      position: '',
      readonly: false,
      minDate: new Date(1900, 0, 1),
      maxDate: new Date(2020, 10, 1),
      currentDate: new Date(),
      showPicker: false,
      showPicker2: false,
      start_at: '',
      end_at: '',
      btn_disable: false,
      add_btn_disable: true,
      lists: []
    }
  },
  methods: {
    onSubmit (e) {
      this.$store.dispatch({
        type: 'learnWork',
        person_record: this.lists
      })
      this.$emit('part4', false)
      this.btn_disable = true
    },
    // 结束日期选择日期的处理方法
    onConfirm2 (time) {
      this.end_at = time.getFullYear() + '年' + (time.getMonth() + 1) + '月' + time.getDate() + '日'
      this.showPicker2 = false
    },
    // 开始日期选择的处理方法
    onConfirm (time) {
      this.start_at = time.getFullYear() + '年' + (time.getMonth() + 1) + '月' + time.getDate() + '日'
      this.showPicker = false
    },
    // 添加一项新内容的处理函数
    addContent () {
      const obj = {}
      if (this.place_name && this.position && this.start_at && this.end_at) {
        obj.place_name = this.place_name
        obj.position = this.position
        obj.start_at = this.start_at
        obj.end_at = this.end_at
        this.lists.push(obj)
        this.place_name = ''
        this.position = ''
        this.start_at = ''
        this.end_at = ''
      } else {
        this.$toast('不能有空的内容')
      }
    },
    close (e) {
      this.lists.splice(e.name, 1)
    },
    // 格式化时间
    formatter (type, val) {
      if (type === 'year') {
        return `${val}年`
      } else if (type === 'month') {
        return `${val}月`
      }
      return val
    }
  },
  computed: {
    visibel () {
      let flag = true
      if (this.place_name && this.position && this.start_at && this.end_at) {
        flag = false
      }
      return flag
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
  width: 100%;
  height: 100vh;

  .add_btn {
    text-align: center;
    margin: 10px 0;

    ::v-deep .van-button--primary {
      background-color: #a52a2a;
      border: 1px solid #ebedf0;
    }
  }

  .delete-button {
    height: 100%;
  }

  .add-content {
    background-color: #333333;
  }
}
</style>
